<template>
  <!-- <view :id="elId" :class="['custom-class' , active ? 'tab__pane--active' : 'tab__pane--inactive']" :style="[animated || active ? '' : 'display: none;', width ? 'width:' + width + 'px;' : '' ]">
    <slot />
  </view>-->
  <view :id="elId" ref="ui-tabs-item">
    <slot />
  </view>
</template>

<script>
import { debounce } from "src/utils/index";
export default {
  inject: ["uitabs"],
  name: "uiTabsItem",
  props: {
    dot: Boolean,
    info: null,
    title: String,
    disabled: Boolean,
    titleStyle: String,
    name: {
      type: [Number, String]
    }
  },

  data() {
    const elId = `ui_col_${Math.ceil(Math.random() * 10e5).toString(36)}`;
    return {
      elId,
      width: null,
      inited: false,
      active: true,
      animated: false
    };
  },
  created() {},
  mounted() {
    let { title, titleStyle } = this;
    // 计算出每一个tab-item的宽度
    this._getSize(width => {
      // fixed 使用this导致组件循环
      this.uitabs.navList.push({
        title,
        titleStyle,
        width
      });
      // this.$nextTick(() => {
      //   this.uitabs.deboundSetLine(true);
      // });
    });
  },
  methods: {
    _getSize(fn) {
      // #ifndef APP-NVUE
      uni
        .createSelectorQuery()
        .in(this)
        .select(`#${this.elId}`)
        .boundingClientRect()
        .exec(ret => {
          this.width = parseInt(ret[0].width - 1);

          fn(this.width);
        });
      // #endif
      // #ifdef APP-NVUE
      dom.getComponentRect(this.$refs["ui-tabs-item"], ret => {
        this.width = parseInt(ret.size.width - 1);
        fn(this.width);
      });
      // #endif
    }
  }
};
</script>

<style lang="scss" scoped></style>
